// import echarts from "echarts";
import * as echarts from "echarts/core";
// 按需引入方式
// import echarts from '@/views/package/echarts/components/BaseEcharts/utils/echarts'
export function getOptions() {
  const stMin = 150;
  const stMax = 230;
  const ygMin = 0;
  const ygMax = 720;
  const stSplit = 1;
  const ygSplit = 5;

  const xData = [];
  const yData = [];

  for (let y = stMin; y < stMax + stSplit; y += stSplit) {
    yData.push(y);
  }

  for (let x = ygMin; x < ygMax; x += ygSplit) {
    xData.push(x);
  }
  let mapData = [];
  for (let x = ygMin; x < ygMax + ygSplit; x += ygSplit) {
    for (let y = stMin; y < stMax + stSplit; y += stSplit) {
      const xIndex = (x - ygMin) / ygSplit;
      const yIndex = (y - stMin) / stSplit;
      mapData.push([xIndex, yIndex, Math.random().toFixed(4)]);
    }
  }
  console.log("xData", xData);
  console.log("yData", yData);
  console.log("mapData", mapData);

  function valueListToIndexArr(list) {
    return list.map((itemList) => {
      return [parseInt(itemList[0] / ygSplit), parseInt(itemList[1] / stSplit)];
    });
  }
  const pointObj = {
    禁止左侧坐标: [
      [0, 163.05],
      [0, 171.31],
      [0, 180.91],
      [0, 185.6],
      [0, 192.75],
      [0, 195.69],
      [0, 203.24],
      [0, 214.45],
      [0, 219.59],
      [0, 220.93],
    ],
    禁止右侧坐标: [
      [320, 220.93],
      [320, 219.59],
      [310, 214.45],
      [280, 203.24],
      [270, 195.69],
      [260, 192.75],
      [240, 185.6],
      [220, 180.91],
      [210, 171.31],
      [200, 163.05],
    ],
    稳定一区左侧坐标: [
      [200, 163.05],
      [210, 171.31],
      [220, 180.91],
      [240, 185.6],
      [260, 192.75],
      [270, 195.69],
      [280, 203.24],
      [310, 214.45],
      [320, 219.59],
      [320, 220.93],
    ],
    稳定一区右侧坐标: [
      [340, 220.93],
      [340, 219.59],
      [330, 214.45],
      [320, 203.24],
      [310, 195.69],
      [300, 192.75],
      [270, 185.6],
      [260, 180.91],
      [250, 171.31],
      [240, 163.05],
    ],
    限制运行区域左侧坐标: [
      [240, 163.05],
      [250, 171.31],
      [260, 180.91],
      [270, 185.6],
      [300, 192.75],
      [310, 195.69],
      [320, 203.24],
      [330, 214.45],
      [340, 219.59],
      [340, 220.93],
    ],
    限制运行区域右侧坐标: [
      [510, 220.93],
      [510, 219.59],
      [490, 214.45],
      [470, 203.24],
      [450, 195.69],
      [440, 192.75],
      [410, 185.6],
      [410, 180.91],
      [370, 171.31],
      [352, 163.05],
    ],
    稳定二区左侧坐标: [
      [352, 163.05],
      [370, 171.31],
      [410, 180.91],
      [410, 185.6],
      [440, 192.75],
      [450, 195.69],
      [470, 203.24],
      [490, 214.45],
      [510, 219.59],
      [510, 220.93],
    ],
    稳定二区右侧坐标: [
      [700, 220.93],
      [700, 219.59],
      [700, 214.45],
      [700, 203.24],
      [700, 195.69],
      [700, 192.75],
      [700, 185.6],
      [700, 180.91],
      [642, 171.31],
      [591, 163.05],
    ],
  };
  const scatterMock = {
    稳定二区: [
      ...pointObj["稳定二区左侧坐标"],
      ...pointObj["稳定二区右侧坐标"],
    ],
    稳定一区: [
      ...pointObj["稳定一区左侧坐标"],
      ...pointObj["稳定一区右侧坐标"],
    ],
    限制区: [
      ...pointObj["限制运行区域左侧坐标"],
      ...pointObj["限制运行区域右侧坐标"],
    ],
    禁止区: [...pointObj["禁止左侧坐标"], ...pointObj["禁止右侧坐标"]],
  };

  const areaSeries = [
    // 文字标注
    {
      name: "标注",
      type: "line",
      data: [],
      yAxisIndex:1,
      xAxisIndex:1,
      markLine: {
        data: [
          {
            name: "稳定运行区",
            xAxis: "230",
            lineStyle: {
              color: "#000",
              type: "dashed",
              width: 0,
              opacity: 0,
            },
            label: {
              show: true,
              formatter: "稳\n定\n运\n行\n区",
              // position: "middle",
              distance: [0, -620],
              fontSize: 16,
              fontWeight: 600,
            },
          },
          {
            name: "禁止运行区",
            xAxis: "120",
            lineStyle: {
              color: "#000",
              type: "dashed",
              width: 0,
              opacity: 0,
            },
            label: {
              show: true,
              formatter: "禁\n止\n运\n行\n区",
              // position: "middle",
              distance: [0, -370],
              fontSize: 16,
              fontWeight: 600,
            },
          },
          {
            name: "限制运行区",
            xAxis: "360",
            lineStyle: {
              color: "#000",
              type: "dashed",
              width: 0,
              opacity: 0,
            },
            label: {
              show: true,
              formatter: "限\n制\n运\n行\n区",
              // position: "middle",
              distance: [0, -370],
              fontSize: 16,
              fontWeight: 600,
            },
          },
          {
            name: "稳定运行区",
            xAxis: "600",
            lineStyle: {
              color: "#000",
              type: "dashed",
              width: 0,
              opacity: 0,
            },
            label: {
              show: true,
              formatter: "稳\n定\n运\n行\n区\n2",
              // position: "middle",
              distance: [0, -370],
              fontSize: 16,
              fontWeight: 600,
            },
          },
          {
            name: "最大水头",
            xAxis: "20",
            lineStyle: {
              color: "#000",
              type: "dashed",
              width: 0,
              opacity: 0,
            },
            label: {
              show: true,
              formatter: "最大水头",
              // position: "middle",
              distance: [0, -30],
              fontSize: 16,
              fontWeight: 600,
            },
          },
          {
            name: "额定水头",
            xAxis: "20",
            lineStyle: {
              color: "#000",
              type: "dashed",
              width: 0,
              opacity: 0,
            },
            label: {
              show: true,
              formatter: "额定水头",
              // position: "middle",
              distance: [0, -415],
              fontSize: 16,
              fontWeight: 600,
            },
          },
          {
            name: "最小水头",
            xAxis: "20",
            lineStyle: {
              color: "#000",
              type: "dashed",
              width: 0,
              opacity: 0,
            },
            label: {
              show: true,
              formatter: "最小水头",
              // position: "middle",
              distance: [0, -720],
              fontSize: 16,
              fontWeight: 600,
            },
          },
          {
            name: "国标要求稳定运行范围界限（55%）",
            xAxis: "640",
            lineStyle: {
              color: "#000",
              type: "dashed",
              width: 0,
              opacity: 0,
            },
            label: {
              show: true,
              formatter: "国标要求稳定运行范围界限（55%）",
              // position: "middle",
              distance: [0, -80],
              fontSize: 16,
              fontWeight: 600,
            },
          },
          {
            name: "出力限制线",
            xAxis: "665",
            lineStyle: {
              color: "#000",
              type: "dashed",
              width: 0,
              opacity: 0,
            },
            label: {
              show: true,
              formatter: "出力限制线",
              // position: "middle",
              distance: [0, -600],
              fontSize: 16,
              fontWeight: 600,
            },
          },
        ],
      },
    },
    //  自定义禁止区域
    {
      type: "custom",
      yAxisIndex:1,
      xAxisIndex:1,
      tooltip: {
        show: false,
      },
      renderItem: function (params, api) {
        if (params.context.rendered) {
          return;
        }
        params.context.rendered = true;
        let points = [];
        for (let i = 0; i < scatterMock["禁止区"].length; i++) {
          points.push(api.coord(scatterMock["禁止区"][i]));
        }
        let color = "rgba(255,0,0,0.5)";
        return {
          type: "polygon",
          transition: ["shape"],
          shape: {
            points: points,
          },
          style: api.style({
            fill: color,
            stroke: echarts.color.lift(color, 0.1),
          }),
        };
      },
      clip: true,
      silent: true,
      data: scatterMock["禁止区"],
    },
    // 自定义稳定一区
    {
      type: "custom",
      yAxisIndex:1,
      xAxisIndex:1,
      tooltip: {
        show: false,
      },
      renderItem: function (params, api) {
        if (params.context.rendered) {
          return;
        }
        params.context.rendered = true;
        let points = [];
        for (let i = 0; i < scatterMock["稳定一区"].length; i++) {
          points.push(api.coord(scatterMock["稳定一区"][i]));
        }
        let color = "rgba(0,128,0,0.5)";
        return {
          type: "polygon",
          transition: ["shape"],
          shape: {
            points: points,
          },
          style: api.style({
            fill: color,
            stroke: echarts.color.lift(color, 0.1),
          }),
        };
      },
      clip: true,
      silent: true,
      data: scatterMock["稳定一区"],
    },
    // 自定义限制区域
    {
      type: "custom",
      yAxisIndex:1,
      xAxisIndex:1,
      tooltip: {
        show: false,
      },
      renderItem: function (params, api) {
        if (params.context.rendered) {
          return;
        }
        params.context.rendered = true;
        let points = [];
        for (let i = 0; i < scatterMock["限制区"].length; i++) {
          points.push(api.coord(scatterMock["限制区"][i]));
        }
        let color = "rgba(255,255,0,0.5)";
        return {
          type: "polygon",
          transition: ["shape"],
          shape: {
            points: points,
          },
          style: api.style({
            fill: color,
            stroke: echarts.color.lift(color, 0.1),
          }),
        };
      },
      clip: true,
      silent: true,
      data: scatterMock["限制区"],
    },
    // 自定义稳定二区
    {
      type: "custom",
      tooltip: {
        show: false,
      },
      yAxisIndex:1,
      xAxisIndex:1,
      renderItem: function (params, api) {
        if (params.context.rendered) {
          return;
        }
        params.context.rendered = true;
        let points = [];
        for (let i = 0; i < scatterMock["稳定二区"].length; i++) {
          points.push(api.coord(scatterMock["稳定二区"][i]));
        }
        let color = "rgba(0,128,0,0.5)";
        return {
          type: "polygon",
          transition: ["shape"],
          shape: {
            points: points,
          },
          style: api.style({
            fill: color,
            stroke: echarts.color.lift(color, 0.1),
          }),
        };
      },
      clip: true,
      silent: true,
      data: scatterMock["稳定二区"],
    },
    // 禁止区域右边线
    {
      yAxisIndex:1,
      xAxisIndex:1,
      name: "",
      data: pointObj["禁止右侧坐标"],
      type: "line",
      symbol: "none",
      itemStyle: {
        color: "#000",
        width: 6,
      },
    },
    // 稳定区域右边线
    {
      yAxisIndex:1,
      xAxisIndex:1,
      name: "",
      data: pointObj["稳定一区右侧坐标"],
      type: "line",
      symbol: "none",
      itemStyle: {
        color: "#000",
        width: 6,
      },
    },
    // 限制区域右边线
    {
      yAxisIndex:1,
      xAxisIndex:1,
      name: "",
      data: pointObj["限制运行区域右侧坐标"],
      type: "line",
      symbol: "none",
      itemStyle: {
        color: "#000",
        width: 6,
      },
    },
    // 区域下边线
    {
      yAxisIndex:1,
      xAxisIndex:1,
      name: "",
      data: [
        [0, 163.05],
        [700, 163.05],
      ],
      type: "line",
      symbol: "none",
      itemStyle: {
        color: "#000",
        width: 6,
      },
    },
    // 区域上边线
    {
      yAxisIndex:1,
      xAxisIndex:1,
      name: "",
      data: [
        [0, 220.93],
        [700, 220.93],
      ],
      type: "line",
      symbol: "none",
      itemStyle: {
        color: "#000",
        width: 6,
      },
    },
    // 区域右边线
    {
      yAxisIndex:1,
      xAxisIndex:1,
      name: "",
      data: [
        [700, 220.93],
        [700, 163.05],
      ],
      type: "line",
      symbol: "none",
      itemStyle: {
        color: "#000",
        width: 6,
      },
    },
    // 区域右下出力限制线
    {
      yAxisIndex:1,
      xAxisIndex:1,
      name: "",
      data: [
        [700, 180.91],
        [591, 163.05],
      ],
      type: "line",
      symbol: "none",
      itemStyle: {
        color: "#000",
        width: 6,
      },
    },
    // 最大水头线
    {
      yAxisIndex:1,
      xAxisIndex:1,
      name: "最大水头",
      data: [
        [0, 229.4],
        [700, 229.4],
      ],
      type: "line",
      symbol: "none",
      itemStyle: {
        color: "red",
        width: 6,
      },
    },
    // 额定水头线
    {
      yAxisIndex:1,
      xAxisIndex:1,
      name: "额定水头",
      data: [
        [0, 186],
        [700, 186],
      ],
      type: "line",
      symbol: "none",
      itemStyle: {
        color: "yellow",
        width: 6,
      },
    },
    // 最小水头线
    {
      yAxisIndex:1,
      xAxisIndex:1,
      name: "最小水头",
      data: [
        [0, 154.6],
        [700, 154.6],
      ],
      type: "line",
      symbol: "none",
      itemStyle: {
        color: "green",
        width: 6,
      },
    },
  ];
  const list = pointObj["稳定一区右侧坐标"];
  const formatterList = valueListToIndexArr(list);
  console.log("formatterList", formatterList);
  let series = [
    // 热力图
    {
      name: "xx热力图",
      type: "heatmap",
      emphasis: {
        itemStyle: { borderColor: "#33333350", borderWidth: 0.5 },
      },
      tooltip: {
        formatter: (params) => {
          // console.log("params", params.value);
          let { value, color } = params;
          const x = value[0];
          const y = value[1];
          return `<span style="font-size:13px;"><b>网格详情</b><br>水头：${
            y * stSplit + stMin
          }m - ${(y + 1) * stSplit + stMin}m<br>有功：${
            x * ygSplit + ygMin
          }kW - ${
            (x + 1) * ygSplit + ygMin
          }kW<br><span ;font-size:13px;">网格占有率:</span>${value[2]}%</span>`;
        },
      },
      data: mapData,
    },
  
    ...areaSeries
 
  ];

  console.log("series", series);
  const option = {
    backgroundColor: "#cccccc20",
    title: {
      text: "Demo Chart",
      subtext: "2021-05-01 04:00 - 2021-05-01 07:54",
      left: "center",
      top: "2%",
    },
    grid: {
      top: "12%",
      bottom: "12%",
      left: "8%",
      right: "8%",
    },
    tooltip: {
      axisPointer: { type: "cross", label: { show: false } },
    },
    // legend: {
    //   top: '8%',
    //   textStyle: { color: '#000000', fontSize: 13, fontWeight: 'bold' }
    // },
    toolbox: {
      show: true,
      right: "3%",
      top: "4%",
      feature: {
        // 还原
        restore: {},
        // 保存为图片
        saveAsImage: {
          // 忽略工具栏、区域缩放组件
          excludeComponents: ["toolbox", "dataZoom"],
        },
      },
      // 工具栏icon颜色
      // iconStyle: { borderColor: '#666' }
    },
    xAxis: [
      {
        type: "category",
        axisLabel: {
          textStyle: { color: "#000000", fontSize: 13, fontWeight: "bold" },
        },
        axisLine: { lineStyle: { color: "#000000", width: 2 } },
        splitLine: {
          show: true,
          lineStyle: { type: "dashed", color: "#70707030" },
        },
        z: 3,
        data: xData,
      },
      {
        type: "value",
        name: "",
        min: ygMin,
        max: ygMax,
        position:'bottom',
        interval: 30,
        nameTextStyle: {
          color: "#9cecfd",
          fontSize: 14,
        },

        axisLine: {
          show: false,
        },
        axisTick: {
          show: false,
        },
        axisLabel: {
          show: false,
        },
        splitLine: {
          show: false,
        },
      },
    ],
    yAxis: [
      {
        name: "水头(m)",
        nameLocation: "center",
        nameGap: 48,
        nameTextStyle: { color: "#000000", fontSize: 14 },
        type: "category",
        axisLabel: {
          textStyle: { color: "#000000", fontSize: 13, fontWeight: "bold" },
        },
        axisLine: { lineStyle: { color: "#000000", width: 2 } },
        splitLine: {
          show: true,
          lineStyle: { type: "dashed", color: "#70707030" },
        },
        z: 3,
        data: yData,
      },
      {
        name: "",
        min: stMin,
        max: stMax,
        position:'left',
        z: 5,
        interval: 5,
        nameTextStyle: {
          color: "#9cecfd",
          fontSize: 14,
          padding: [0, 0, 10, 30],
        },
        axisLine: {
          show: false,
        },
        axisTick: {
          show: false,
        },
        axisLabel: {
          show: false,
        },
        splitLine: {
          show: false,
        },
      },
    ],
    visualMap: {
      right: "3.4%",
      top: "center",
      min: 0,
      max: 1,
      calculable: true,
      realtime: false,
      seriesIndex: 0,
      itemWidth: 16,
      itemHeight: 240,
      formatter: function (value) {
        return value * 100 + "%"; // 范围标签显示内容。
      },
      inRange: {
        // color: [
        //   "#ffffff",
        //   "#d7e3ff",
        //   "#b5c9ff",
        //   "#8fb3ff",
        //   "#7e97ff",
        //   "#6270f7",
        //   "#0062ff",
        //   "#009797",
        //   "#00c732",
        //   "#62ff00",
        //   "#97ff00",
        //   "#c7ff32",
        //   "#ffff00",
        //   "#ffa100",
        //   "#fb7900",
        // ],
        color: [
          "#ffffff",
          "#d7e3ff",
          "#b5c9ff",
          "#8fb3ff",
          // "#7e97ff",
          // "#6270f7",
          // "#0062ff",
          // "#009797",
          // "#00c732",
          // "#62ff00",
          // "#97ff00",
          // "#c7ff32",
          // "#ffff00",
          // "#ffa100",
          // "#fb7900",
        ],
      },
      textStyle: { fontWeight: "bold" },
    },
    dataZoom: [
      {
        type: "slider",
        xAxisIndex: [0, 1],
        filterMode: "empty",
        height: 26,
        bottom: "2.8%",
        // start: 0,
        // end: 50
      },
      {
        type: "slider",
        yAxisIndex: [0, 1],
        filterMode: "empty",
        width: 26,
        right: "1.2%",
        // start: 0,
        // end: 70,
      },
      {
        type: "inside",
        xAxisIndex: [0, 1],
        filterMode: "empty",
      },
      {
        type: "inside",
        yAxisIndex: [0, 1],
        filterMode: "empty",
      },
    ],
    series: series,
  };

  return option;
}
